{extend name="./view/base/admin.html" /}
{block name="body"}
<div class="panel panel-default">
    <div class="panel-body">
        <form id="form">
            <?php foreach($list as $k=>$v):?>
            <?php if($k=='trigger') continue;?>
            <div class="form-group forms" id="{$k}" {if !empty($trigger)&&empty($trigger[$k])}style="display:none;"
                {/if}>
                <label><?=$v['title']?></label>
                <?php if($v['type']=='text'):?>
                <input class="form-control" type="text" value="{$v['value']}" name="{$k}">
                <?php elseif($v['type']=='select'):?>
                <select name="{$k}" class="form-control {if !empty($trigger[$k])}onchangetrigger{/if}">
                    <?php foreach($v['options'] as $k1=>$v1):?>
                    <option value="{$k1}" {$v['value']==$k1?'selected':''}><?=$v1?></option>
                    <?php endforeach;?>
                </select>
                <?php elseif($v['type']=='radio'):?>
                <br>
                <?php foreach($v['options'] as $k1=>$v1):?>
                <label class="checkbox c-checkbox c-checkbox-rounded">
                    <input type="radio" class="{if !empty($trigger[$k])}onchangetrigger{/if}" name="{$k}" value="{$k1}"
                        {$v['value']==$k1?'checked':''}>
                    <span class="fa fa-check"></span><?=$v1?>
                </label>
                <?php endforeach;?>
                <?php elseif($v['type']=='image'):?>
                <div class="input-group">
                    <input type="text" class="form-control" name="{$k}" value="{$v['value']}" readonly="">
                    <div class="input-group-append">
                        <input type="file" class="d-none" onchange="upload(this)">
                        <button type="button" onclick="$(this).prev('input').click()" class="btn btn-yellow no-caret">上传图片</button>
                    </div>
                    <div class="input-group {if !$v.value}d-none{/if}">
                        <img src="{$v.value}" class="img-responsive img-thumbnail" width="150">
                        <em class="close ml-0" title="删除这张图片" style="cursor: pointer;" onclick="deleteImage(this)">×</em>
                    </div>
                </div>
                <?php endif;?>
            </div>
            <?php endforeach;?>
            <button class="btn btn-sm">提交</button>
        </form>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var list = JSON.parse('<?=json_encode($list)?>')
    var trigger = JSON.parse('<?=json_encode($trigger)?>');
    $.each(trigger, (i, v) => {
        //获取需要trigger事件的健
        var trigger_name = i;
        //获取事件的值
        var trigger_value = list[trigger_name].value;
        //获取需要显示的字段
        var trigger_field = v[trigger_value]
        trigger_field && trigger_field.forEach(v1 => {
            $('#' + v1).show();
        });
    })
    $('.onchangetrigger').on('change', function () {
        var o = this;
        $('.forms').hide();
        trigger[o.name][o.value] && trigger[o.name][o.value].forEach(v => {
            $('#' + v).show();
        })
        $('#' + o.name).show();
    })
    $(document).on('submit', 'form[id=form]', function () {
		$(this).ajaxSubmit({
			type: 'post',
			success: function (res) {
				$.alert(res);
			}
		})
		return false;
	})
    function upload(obj){
        var data = new FormData();
        data.append('image',obj.files[0]);
        $.upload('{:url("upload")}',data,function(res){
            if(res.code==0){
                $.alert(res);
                return false;
            }
            $(obj).parent('div').prev('input').val(res.data);
            $(obj).parent('div').next('div').find('img').attr('src',res.data)
            $(obj).parent('div').next('div').removeClass('d-none')
        })
    }
    function deleteImage(obj){
        $(obj).parent('div').prev('div').prev('input').val('');
        $(obj).parent('div').addClass('d-none')
    }
</script>
{/block}